import { List } from 'antd-mobile';
import FileIcon from '../FileIcon';

import { transferFileSize } from '../../utils';

import './style.scss';

export default function(props) {
  const { type, size, fileName, url } = props.msgContent;

  const handleDownload = () => {
    const docA = document.createElement('a');
    docA.setAttribute('href', url);
    docA.setAttribute('download', fileName);
    docA.setAttribute('target', '_blank');

    docA.click();
  }

  return <List className="fileComponent">
      <List.Item prefix={<FileIcon type={type} />} description={transferFileSize(size)}>
        <span className="fileName" onClick={handleDownload}>{ fileName }</span>
      </List.Item>
    </List>;
}